<!--安全核查-->
<template>
    <div id="regularInspections">
      <div style="margin-bottom: 10px;">
        <van-search v-model="form.propertyPerson" show-action placeholder="请输入户主姓名" @search="serachData">
          <template #left>
            <div @click="show = true" style="margin-right: 5px;"><van-icon name="arrow-down" />{{ areaValue }}</div>
          </template>
          <template #action>
            <div style="display: flex;align-items: center;">
              <van-icon @click="show1 = true" name="filter-o" style="color: #3f8ffc;font-size: 20px;margin-right: 8px;" />
              <van-button @click="showMap()" type="info" size="small"><van-icon name="exchange" />地图</van-button>
            </div>
          </template>
        </van-search>
        <van-popup v-model="show" round position="bottom">
          <van-cascader v-model="form.cityCode" title="选择所属区域" :options="options" @change="onChange" @finish="onFinish"
            :closeable="false" style="position: relative;" />
          <span style="position: absolute; top: 0%; right: 10px;font-size: 16px;height: 48px;line-height: 48px;"
            @click="close">确定</span>
        </van-popup>
        <van-popup v-model="show1" closeable title="筛选" position="bottom" show-cancel-button>
          <div
            style="height: 45px;line-height: 45px;font-size:16px;text-align: center;border-bottom: 1px solid #ccc;color: black;font-weight: bold ">
            筛选</div>
          <div class="searchWrap">
            <van-field label-width="4em" v-model="areaValue" is-link readonly label="所属区域" placeholder="请选择所属区域"
              @click="show = true" />
            <van-field label-width="4em" name="radio" label="核查结论">
              <template #input>
                <van-radio-group v-model="form.inspectResult" direction="horizontal">
                  <van-radio name="0">基本安全</van-radio>
                  <van-radio name="1">存在风险</van-radio>
                  <van-radio name="3">危房正在整治中</van-radio>
                  <van-radio name="4">已拆除</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label-width="4em" name="radio" label="房屋用途">
              <template #input>
                <van-radio-group v-model="form.houseUsage" direction="horizontal">
                  <van-radio name="1">经营性自建房</van-radio>
                  <van-radio name="2">其他自建房</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label-width="4em" name="radio" label="数据来源">
              <template #input>
                <van-radio-group v-model="form.dataSource" direction="horizontal">
                  <van-radio name="0">网格巡查</van-radio>
                  <van-radio name="2">农户提交</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label-width="4em" name="radio" label="核查时间">
              <template #input>
                <van-field style="width: calc(50% - 10px);float: left;padding: 0;" :border="false" label-width="0"
                  v-model="form.inspectStaterDate" clearable label="" placeholder="请选择开始时间" @focus="showStart = true" />
                <span style="float: left;line-height: 24px;">-</span>
                <van-field style="width: calc(50% - 10px);float: left;padding: 0;" :border="false" label-width="0"
                  v-model="form.inspectEndDate" clearable label=" " placeholder="请选择结束时间" @focus="showEnd = true" />
              </template>
            </van-field>
            <!-- 开始时间控件 -->
            <van-popup v-model="showStart" position="bottom">
              <van-datetime-picker v-model="currentDate" type="date" @confirm="confirm" @cancel="cancel" />
            </van-popup>
            <!-- 结束时间控件 -->
            <van-popup v-model="showEnd" position="bottom">
              <van-datetime-picker v-model="currentDate1" type="date" @confirm="confirm1" @cancel="cancel1" />
            </van-popup>
          </div>
          <div style="text-align: center;margin-bottom: 10px;">
            <van-button plain type="info" style="width: 47%;" @click="restForm()">重置</van-button>
            <van-button plain style="width: 47%;" @click="sureForm()">确定</van-button>
          </div>
        </van-popup>
      </div>
      <div v-if="nowIndex == 0" class="regularInspections-nfcc">
        <div class="regularInspections-middle1" ref="regularInspectionsMiddle1">
          <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
          <van-list v-model="loading" :offset="4" :finished="finished" @load="onLoad" finished-text="没有更多了"
            class="regularInspections-middle1">
            <van-cell v-for="(item, index) in ListDataOption" :key="index" @click="handleAdd(item)">
              <ul class="regularInspections-middle">
                <li class="regularInspections-middle2">
                  户主姓名：{{ item.propertyPerson }}
                </li>
                <li class="regularInspections-middle4">
                  自建房排查编号：{{ item.checkNumber }}
                </li>
                <li class="regularInspections-middle4">
                  房屋用途：{{ item.houseUsage }}
                </li>
                <li class="regularInspections-middle4">
                  数据来源：{{ item.dataSource }}
                </li>
                <li class="regularInspections-middle4">
                  巡查时间：{{ item.patrolDate }}
                </li>
                <li class="regularInspections-middle4">
                  地址：{{ item.detailAddress }} <img @click.stop="showGeo(item)" style="margin-right: 4px" width="10"
                    src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
                </li>
              </ul>
            </van-cell>
          </van-list>
          <!-- </van-pull-refresh> -->
        </div>
      </div>
      <div v-if="nowIndex == 1">
        <van-list v-model="loading" :offset1="4" :finished="finished" @load="onLoad" finished-text="没有更多了"
          class="regularInspections-middle1">
          <van-cell v-for="(item, index) in ListDataOption" :key="index" @click="handleAdd(item)">
            <ul class="regularInspections-middle">
              <li class="regularInspections-middle2">
                户主姓名：{{ item.propertyPerson }}
              </li>
              <li class="regularInspections-middle4">
                自建房排查编号：{{ item.checkNumber }}
              </li>
              <li class="regularInspections-middle4">
                核查结论：{{ item.inspectResult }}
              </li>
              <li class="regularInspections-middle4">
                房屋用途：{{ item.houseUsage }}
              </li>
              <li class="regularInspections-middle4">
                数据来源：{{ item.dataSource }}
              </li>
              <li class="regularInspections-middle4">
                巡查时间：{{ item.patrolDate }}
              </li>
              <li class="regularInspections-middle4">
                核查人：{{ item.inspectPerson }}
  
              </li>
              <li class="regularInspections-middle4">
  
                核查时间：{{ item.inspectDate }}
              </li>
              <li class="regularInspections-middle4">
                地址：{{ item.detailAddress }}<img @click.stop="showGeo(item)" style="margin-right: 4px" width="10"
                  src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
              </li>
            </ul>
          </van-cell>
        </van-list>
      </div>
      <div class="sort bottomfix">
        <ul>
          <li v-for="(item, index) in bottomList" :key="index" :class="{ secelt: nowIndex == index }"
            @click="bottomListBtn(item, index)">
            <el-badge v-if="index == 0" :value="dbTotal" :max="99" class="item">
              {{ item }}
            </el-badge>
            <span v-else>
              {{ item }}
            </span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  <script>
  import dd from 'gdt-jsapi'
  import axios from 'axios'
  import { houseRemoldBaseInfoNewXclist } from '@/utils/api'
  import { GetAdministrative, getDatalistForTree } from '@/utils/api'
  export default {
    data() {
      return {
        startPage: 0,
        loading: false,
        finished: false,
        refreshing: false,
        radio: false,
        nowIndex: 0,
        areaValue: "惠州市",
        bottomList: ['待巡查 ', '已巡查'],
        showPicker: false,
        showPicker1: false,
        show: false,
        show1: false,
        showStart: false,
        showEnd: false,
        currentDate: new Date(),
        currentDate1: new Date(),
        dataSource: '',
        options: [],
        sourData: [
          {
            name: '全部',
            val: ''
          },
          {
            name: '网格巡查',
            val: 0
          },
          {
            name: '巡查新增',
            val: 1
          },
          {
            name: '农户提交',
            val: 2
          }
        ],
        CountyData: [],
        sortList: [
          {
            title: '所属区域',
            name: 'RWZT',
            sort: 'asc'
          },
          {
            title: '数据来源',
            name: 'RWZT',
            sort: 'asc'
          }
        ],
        BaseURL: window.g.BaseURL + '/api/farmerHouse',
        active: '0',
        form: {
          propertyPerson: null,
          cityCode: null,
          dataSource: null,
          inspectEndDate: null,
          houseUsage: null,
          inspectResult: null,
          inspectStaterDate: null,
        },
        ISShow: true,
        cityCode: window.localStorage.getItem('citycode').replace(/(0+)$/g, ''),
        ListDataOption: [],
        totalCount: 0,
        dbTotal: 0
      }
    },
    components: {},
    methods: {
      onRefresh() {
        this.startPage = 0
        // 清空列表数据
        this.finished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.ListDataOption = []
        this.onLoad()
      },
      onLoad() {
        // if (this.refreshing) {
        //     this.ListDataOption = [];
        //     this.refreshing = false;
        // }
        this.startPage += 1
        this.getData()
      },
      getCountyData: async function () {
        this.CountyData = []
        let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + window.localStorage.getItem('citycode'))
        if (webResult.data.data) {
          debugger
          webResult.data.data.unshift({
            citycode: window.localStorage.getItem('citycode'),
            cityname: "全部"
          })
        }
        this.CountyData = webResult.data.data
      },
      bottomListBtn(item, index) {
        if(this.loading) {
          this.$toast.fail("正在查询，请勿切换!");
          return false
        }
        // 避免重复点击
        if(this.nowIndex == index){
          return false
        }
        this.nowIndex = index
        this.onRefresh()
      },
      onConfirm(val) {
        if (val.cityname == '') {
          this.sortList[0].title = '所属区域'
        } else {
          this.sortList[0].title = val.cityname
          this.cityCode = val.citycode
        }
        this.showPicker = false
        this.startPage = 0
        this.ListDataOption = []
        this.onLoad()
      },
      onConfirm1(val) {
        if (val.name == '') {
          this.sortList[1].title = '数据来源'
        } else {
          this.dataSource = val.val
          this.sortList[1].title = val.name
        }
        this.showPicker1 = false
        this.startPage = 0
        this.ListDataOption = []
        this.onLoad()
      },
      //字段排序
      _sortlichange(item, index) {
        const self = this
        if (item.sort == 'asc') {
          item.sort = 'desc'
        } else {
          item.sort = 'asc'
        }
        if (index == 0) {
          this.showPicker = true
          this.showPicker1 = false
        } else {
          this.showPicker1 = true
          this.showPicker = false
        }
      },
      //日期格式
      formatDate(date) {
        return `${date.getFullYear()}-${(date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1}-${date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()}`
      },
      //确认开始日期
      confirm(date) {
        this.showStart = false
        this.form.inspectStaterDate = this.formatDate(this.currentDate)
      },
      //确认结束日期
      confirm1(date) {
        this.showEnd = false
        this.form.inspectEndDate = this.formatDate(this.currentDate1)
      },
      cancel() {
        this.showStart = false;
        this.form.inspectStaterDate = ""
      },
      cancel1() {
        this.showEnd = false
        this.form.inspectEndDate = ""
      },
      handleAdd(data) {
        this.$router.push({
          path: '/regularInspectionsEtid',
          query: {
            data: JSON.stringify(data),
            type: this.nowIndex
          }
        })
      },
      showMap(data) {
        this.$router.push({
          path: '/SecurityMain',
          query: {
            citycode: this.form.cityCode,
            cityname: this.areaValue,
          }
        })
      },
      serachData(val) {
        this.startPage = 0
        this.ListDataOption = []
        this.onLoad()
      },
      //重置
      restForm() {
        for (var i in this.form) {
          this.form[i] = null;
        }
        let cityCode = "441300000000"
        if (window.localStorage.getItem('citycode') && window.localStorage.getItem('citycode') != "330000000000") {
          cityCode = window.localStorage.getItem('citycode')
        }
        this.$set(this.form, 'cityCode', cityCode)
        if (window.localStorage.getItem('cityName') && window.localStorage.getItem('cityName') !== '惠州市') {
          this.areaValue = window.localStorage.getItem('cityName')
        } else {
          this.areaValue = "杭州市"
        }
      },
      //确定
      sureForm() {
        this.show1 = false;
        this.startPage = 0
        this.ListDataOption = []
        this.onLoad()
      },
      //定位
      showGeo: async function (item) {
        let webResult = await axios.get(this.BaseURL + '/tfwZjf/getZjfGeomP?yhfwbh=' + item.checkNumber, {
          headers: {
            isOutParam: true,
          },
        });
        if (webResult.data.data && webResult.data.data.length > 0) {
          let dataValue = [{ "geomP": webResult.data.data[0] }]
          var url = window.g.oneMapUrlLocation + "?user=" + window.localStorage.getItem("citycode") + "&data=" + encodeURIComponent(JSON.stringify(dataValue))
          window.open(url)
        } else {
          this.$toast.fail("坐标不能为空!")
        }
  
      },
      async getData() {
        let _this = this;
        this.loading = true;
        let parm = {
          pageNo: this.startPage,
          pageSize: 20,
          cityCode: '441300000000',
          propertyPerson: this.form.propertyPerson,
          xcStatus: this.nowIndex == 0 ? 1 : 2,
          dataSource: this.dataSource
        }
        for (var i in this.form) {
          if (this.form[i]) {
            if (i == 'cityCode') {
              parm[i] = this.form[i].toString().replace(/(0+)$/g, '')
            } else if (i == 'inspectStaterDate') {
              parm[i] = this.form[i] + " 00:00:00"
            } else if (i == 'inspectEndDate') {
              parm[i] = this.form[i] + " 23:59:59"
            } else {
              parm[i] = this.form[i]
            }
          }
        }
        let webResult = await houseRemoldBaseInfoNewXclist(parm)
        if (webResult.data.code == 200) {
          let pageList = webResult.data.data.pageList
          if (pageList.length > 0) {
            this.finished = false
            this.ListDataOption.push(...pageList)
          } else {
            this.finished = true
          }
          if (this.ListDataOption.length >= webResult.data.data.totalCount) {
            this.finished = true
            // return
          }
          this.totalCount = webResult.data.data.totalCount
          if (this.nowIndex == 0) {
            this.dbTotal = webResult.data.data.totalCount
          }
        } else {
          this.finished = true
        }
        this.loading = false
      },
      getXianOpenDataView: async function (data) {
        debugger
        if (window.localStorage.getItem('citycode') != "330000000000") {
          this.options = [{
            text: window.localStorage.getItem('cityName'),
            value: window.localStorage.getItem('citycode'),
            isHasChild: true
          }]
        }
        const res = await getDatalistForTree(data)
        res.data.data.forEach((item) => {
          let obj = {
            text: item.cityname,
            value: item.citycode,
          }
          if (item.citycode.toString().substring(9, 12) !== "000") {
  
          } else {
            obj['children'] = []
          }
          this.options.push(obj)
        })
        // this.options = res.data.data
      },
      getXZQH: async function (value, selectedOptions, tabIndex) {
        var res = await GetAdministrative(value)
        selectedOptions[tabIndex].children = []
        if (res.data.data.length > 0) {
          res.data.data.forEach((element) => {
            let obj = {
              text: element.cityname,
              value: element.citycode
            }
            if (element.citycode.toString().substring(9, 12) !== "000") {
  
            } else {
              obj['children'] = []
            }
            selectedOptions[tabIndex].children.push(obj)
          })
        }
      },
      onChange({ value, selectedOptions, tabIndex }) {
        if (value.toString().substring(9, 12) !== "000" || selectedOptions[0].isHasChild) {
  
        } else {
          this.getXZQH(value, selectedOptions, tabIndex)
        }
        this.onFinish({ value, selectedOptions, tabIndex })
      },
      onFinish({ value, selectedOptions, tabIndex }) {
        this.areaValue = selectedOptions[selectedOptions.length-1].text;
        this.form.cityCode = value
        // this.form.cityCode.length == 3 ? (this.IsShowAre = false) : ''
      },
      close() {
        this.show = false;
        this.startPage = 0
        this.ListDataOption = []
        this.onLoad()
      },
    },
    created() {
      this.startPage = 0
      this.ListDataOption = []
    },
    mounted() {
      this.getXianOpenDataView(window.localStorage.getItem('citycode'))
      this.restForm()
      dd.ready(function () {
        dd.setTitle({
          title: '安全核查'
        })
          .then((res) => { })
          .catch((err) => {
            console.error(err)
          })
      })
      this.getCountyData()
    }
  }
  </script>
  <style lang="scss" scoped>
  #regularInspections {
    height: 100vh;
    overflow: auto;
    background: #eee;
    width: 100vw;
  
    .sort {
      height: 5vh;
      line-height: 5vh;
      background: #fff;
  
      ul {
        display: flex;
  
        li {
          width: 100%;
          text-align: center;
          // font-size: 1.6vh;
          font-weight: 400;
          color: #6c6c6c;
          cursor: pointer;
  
          img {
            height: 1.5vh;
          }
        }
      }
    }
  
    .searchWrap {
      padding: 10px 0;
  
      .stitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        color: #3f8ffc;
      }
    }
  
    .bottomfix {
      border-radius: 10px;
      // height: 5vh;
      background: #fff;
      margin: 10px 0px;
  
      .secelt {
        background: #3f8ffc;
        border-radius: 10px;
        color: #fff;
        // border-top-left-radius: 10px;
        // border-bottom-left-radius: ;
      }
    }
  
    .title {
      width: 100%;
      height: 46px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
    }
  
    .regularInspections-footer {
      width: 99%;
      margin-top: 4px;
      margin: 0 auto;
      padding-top: 12px;
    }
  
    .regularInspections-middle1 {
      height: calc(100vh - 120px);
      // overflow: auto;
      overflow-y: auto;
  
      .regularInspections-middle {
        background-color: #fff;
        border-radius: 10px;
        padding: 8px 10px;
        width: 98%;
        margin: 0 auto;
  
        .regularInspections-middle2 {
          font-size: 18px;
          font-weight: 1000;
          color: black;
          line-height: 36px;
        }
  
        .regularInspections-middle3 {
          font-size: 14px;
          color: #aaa;
          line-height: 24px;
  
          span {
            float: right;
            // padding-left: 4vw;
          }
        }
  
        .regularInspections-middle4 {
          font-size: 14px;
          color: #aaa;
          line-height: 24px;
  
          span {
            float: right;
            // padding-left: 4vw;
          }
        }
      }
    }
  }
  </style>
  <style>
  #regularInspections .van-tab {
    font-size: 18px;
  }
  </style>
  